<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import navbar from "@/components/navbar/navbar.vue";
import { onPageScroll } from "@dcloudio/uni-app";
import { router, toast } from "@/utils/tools";
import { apiPublishGoods } from "@/apis/goods";
import { uploadImg } from "@/utils/request";
import { mapStores } from "pinia";
import { apiProductDict } from "@/apis/product";
import { onLoad, onHide } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import { onShow } from "@dcloudio/uni-app";
import { onReady } from "@dcloudio/uni-app";
import { getToken } from "@/utils/auth";
import { uniChooseMedia, uniChooseImg } from "@/utils/uniToos";
import { isImg } from "@/utils/tools";

const userStore = useUserStore();
// 获取用户信息
const userMySelf = userStore.userInfo;
//console.log(userMySelf,'userMySelf-获取用户信息')
const imgList = ref([]);
const navbarFixed = ref(false);
const showLoginRef = ref(false);
const chooseUploadRef = ref(false);
const showRef = ref(false);

const dictList = ref([]);

const dictFields = ref([]);
import cache from "@/utils/cache";
// #ifdef  MP-WEIXIN
const chooseLocation = requirePlugin("chooseLocation");
// #endif
//const key = ref("XMGBZ-I25WB-INDUT-JPNBT-ATY6S-YRBTJ");
const key = ref("QWQBZ-XIXCZ-6W2XR-7ISUU-QQX6E-GMBEF");
const referer = ref("奇石家");
const category = ref("全部,地名地址,小区,酒店宾馆");
const latitude: any = ref(null);
const longitude: any = ref(null);
const fbAddress: any = ref("");
const mapShow: any = ref(false);
let treasureType = ref(0); //0否 1是 珍宝阁奇石
const data: any = reactive({
  formData: {
    describes: "", // 内容
    title: "", // 标题
    images: [], // 照片路径
    delivery: "", // 发货方式  0-包邮 1-不包邮 2-自取
    oldPrice: "", // y原价
    currentPrice: "", // 现价
    types: "", // 类型
    brand: "", // 品牌
    fineness: "", // 成色
    address: "", // 详细地址
    lon: null,
    lat: null,
    leng: "", //长度
    wide: "", //宽度
    heg: "", //高度
    weight: "",
    producingArea: "", //宝贝产地
    treasure: "" //是否发布珍宝阁商铺  0-否 1-是   （拥有发布珍宝阁信息的用户才显示该选项）
  },
  clearFormData: {
    describes: "", // 内容
    title: "", // 标题
    images: [], // 照片路径
    delivery: "", // 发货方式  0-包邮 1-不包邮 2-自取
    oldPrice: "", // y原价
    currentPrice: "", // 现价
    types: "", // 类型
    brand: "", // 品牌
    fineness: "", // 成色
    address: "", // 详细地址
    leng: "", //长度
    wide: "", //宽度
    heg: "", //高度
    weight: "",
    producingArea: "" //宝贝产地
  },
  // formData: { "describes": "13131", "title": "31", "images": "https://fuyue-test-oss.oss-cn-shanghai.aliyuncs.com/6435f110-c0a2-4184-9013-bec3fa356e6b.png", "delivery": 1, "oldPrice": "3131", "currentPrice": "313", "types": 217, "brand": "", "fineness": "", "address": "111", "style": 222, "type": 231, "dict": "[{\"field\":\"types\",\"value\":217,\"name\":\"图案石\"},{\"field\":\"style\",\"value\":222,\"name\":\"园林布置\"},{\"field\":\"type\",\"value\":231,\"name\":\"灵璧石\"}]" },
  rules: {
    title: {
      type: "string",
      required: true,
      message: "请填写标题",
      trigger: ["blur", "change"],
    },
    describe: {
      type: "string",
      max: 1,
      required: true,
      message: "请填写描述",
      trigger: ["blur", "change"],
    },
  },
});
const formRef = ref(null);
const submit = () => {
  uni.showToast({
    title: "提交成功",
  });
};
const handleChooseUpload = () => {
  // 判断是否登录
  if (null === getToken()) {
    showLoginRef.value = true;
    return false;
  }

  if (imgList?.value?.[0]?.type === "image") {
    handleUploadImage();
    return;
  }

  chooseUploadRef.value = true;
};

const isLoginChange = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return true;
  }
  return false;
};

const handleUploadImage = () => {
  uni.chooseImage({
    count: 9,
    sizeType: ["original", "compressed"],
    sourceType: ["album"],
    success: (imgRes: any) => {
      uni.showLoading({ title: "上传中..." });
      let files = imgRes.tempFiles;
      //console.log("图片大小--", imgRes);
      files.forEach(async (item: any, index: number) => {
        //console.log("--图片--", item);
        let resUpload = await uploadImg(item.path);
        //console.log(resUpload, "上传---");
        // 这里可以进行上传操作
        imgList.value.push({
          type: "image",
          url: resUpload.data.url,
        });
        //console.log("图片列表", imgList.value);
      });
      uni.hideLoading();
    },
  });
};

const handleUploadMedia = async () => {
  const files = (await uniChooseMedia({ mediaType: ["mix"] })) as any[];
  if (imgList.value.length + files.length > 9) {
    return toast("最多允许上传9个!");
  }
  const videoFiles = files.filter((url) => !isImg(url));
  if (videoFiles.length > 1) {
    return toast("最多允许上传一个视频!");
  }
  const flag1 = imgList.value.find((o) => o.type === "video");
  const flag2 = files.find((url) => !isImg(url));
  if (flag1 && flag2) {
    return toast("最多允许上传一个视频!");
  }

  // files.forEach(async (item: any, index: number) => {
  //   let resUpload = await uploadImg(item);
  //   imgList.value.push({
  //     type: isImg(resUpload.data.url) ? "image" : "video",
  //     url: resUpload.data.url,
  //   });
  // });

  for await (const item of files) {
    let resUpload = await uploadImg(item);
    imgList.value.push({
      type: isImg(resUpload.data.url) ? "image" : "video",
      url: resUpload.data.url,
    });
  }
};

const handleUploadImg = async () => {
  const files = (await uniChooseImg()) as any[];
  if (imgList.value.length + files.length > 9) {
    return toast("最多允许上传9个!");
  }
  for await (const item of files) {
    let resUpload: any = await uploadImg(item);
    imgList.value.push({
      type: "image",
      url: resUpload.data.url,
    });
  }
};

const handleUploadVideo = async () => {
  uni.chooseVideo({
    sourceType: ["camera", "album"],
    compressed: true, // 需要压缩
    maxDuration: 60,
    success: async function (res) {
      uni.showLoading({ title: "上传中..." });
      //console.log("视频资源---", res);
      //console.log("视频资源大小--", res.size, 1024 * 1024 * 10);
      if (res.size > 1024 * 1024 * 10) {
        toast("视频过大请重新上传！");
      }
      // 上传缩略图
      // let resThumb = await uploadImg(res.thumbTempFilePath);
      // 上传视频
      let resVideoUpload = await uploadImg(res.tempFilePath);
      //console.log("视频上传成功!", resVideoUpload);
      imgList.value.push({
        type: "video",
        url: resVideoUpload.data.url,
        thumb: res.thumbTempFilePath,
      });
      uni.hideLoading();
      // self.src = res.tempFilePath;
    },
  });
};

const handleClose = (index: number = 0) => {
  //console.log("选择了索引---", index);
  // 删除一个元素
  imgList.value.splice(index, 1);
  //console.log("----", imgList.value);
};
// const chooseLocation = () => {
//   toast("选择位置");
// };
const cancelClick = () => {
  data.formData = {
    describes: "", // 内容
    title: "", // 标题
    images: [], // 照片路径
    delivery: "", // 发货方式  0-包邮 1-不包邮 2-自取
    oldPrice: "", // y原价
    currentPrice: "", // 现价
    types: "", // 类型
    brand: "", // 品牌
    fineness: "", // 成色
    address: "", // 详细地址
    leng: "", //长度
    wide: "", //宽度
    heg: "", //高度
  };
  imgList.value = [];
};
const handleNumber = (num) => {
  if (num === "") {
    return true;
  }
  if (+num <= 0 || +num > 999.99) {
    return false;
  }
  return true;
};
const publishGoods = async () => {
  console.log('data.formData',data.formData);
  if (isLoginChange()) return;

  if (false === userStore.isLogin) {
    showLoginRef.value = true;
    return false;
  }

  if (!data.formData.title) {
    toast("请填写标题！");
    return false;
  }

  if (!data.formData.describes) {
    toast("请填写简介！");
    return false;
  }
  if (imgList.value.length <= 0) {
    toast("请上传图片！");
    return false;
  }
  if (!handleNumber(data.formData.leng)) {
    toast("请填写合法长度！");
    return false;
  }
  if (!handleNumber(data.formData.wide)) {
    toast("请填写合法宽度！");
    return false;
  }
  if (!handleNumber(data.formData.heg)) {
    toast("请填写合法高度！");
    return false;
  }
  if (!handleNumber(data.formData.weight)) {
    toast("请填写合法重量！");
    return false;
  }
  if (data.formData.address === "") {
    toast("请填写宝贝位置！");
    return false;
  }
  // if (!data.formData.oldPrice) {
  //   toast("请填写原价！");
  //   return false;
  // }
  if (!data.formData.currentPrice) {
    toast("请填写价格！");
    return false;
  }
  if (!data.formData.producingArea) {
    toast("请填宝贝产地！");
    return false;
  }
  if (data.formData.delivery === "") {
    toast("请选择发货方式！");
    return false;
  }
  if (!userMySelf.shopVip) {
    return toast("暂未开通会员或者商铺！");
  }
  let fieldData = [];
  // 处理字典数据
  for (const key1 in dictFields.value) {
    for (const key2 in dictList.value) {
      for (const key3 in dictList.value[key2]["types"]) {
        if (
          data.formData[dictFields.value[key1]] ==
          dictList.value[key2]["types"][key3]["typeId"]
        ) {
          let field = {
            field: dictFields.value[key1],
            fieldName: dictList.value[key2]["deptName"],
            value: data.formData[dictFields.value[key1]],
            name: dictList.value[key2]["types"][key3]["deptName"],
          };
          fieldData.push(field);
        }
      }
    }
  }
  let images: any[] = [];
  for (const key in imgList.value) {
    images.push(imgList.value[key]["url"]);
  }
  data.formData.images = images.join(",");
  data.formData.dict = JSON.stringify(fieldData);
  // 防抖 500毫秒
  uni.$uv.debounce(add, 500);
};

const add = async () => {
  const key = imgList?.value?.[0]?.type === "image" ? "images" : "videos";
  //console.log("imgList: ", imgList);
  const { images, ...rest } = data.formData;
  const params = {
    ...rest,
    // [key]: data.formData.images,
    images: imgList?.value
      ?.filter((o) => isImg(o.url))
      ?.map((o) => o.url)
      ?.join(","),
    videos: imgList?.value
      ?.filter((o) => !isImg(o.url))
      ?.map((o) => o.url)
      ?.join(","),
  };
  //console.log("params", params);
  let res = await apiPublishGoods(params);
  if (res.code == 200) {
    toast("提交成功！");
    cancelClick();
    uni.switchTab({
      url: "/pages/index/index",
    });
  }
  if (res.code != 200) {
    // toast(res.code === 500 ? '升级开通会员，去下架' : res.msg);
    toast(res.msg);
    return false;
  }
};

const getDictList = async () => {
  let res = await apiProductDict({});
  dictList.value = res.data;
  for (const key in dictList.value) {
    dictFields.value.push(dictList.value[key]["field"]);
  }
};
// 监听页面滚动
onPageScroll((e: any) => { });

onLoad(() => {
  // #ifdef WEB
  window.addEventListener('message', function (event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      //console.log('location', loc);
      mapShow.value = !mapShow.value;
      data.formData.address = loc.poiaddress
      data.formData.lon = loc.latlng.lng;
      data.formData.lat = loc.latlng.lat;
    }
  }, false);
  // #endif
  // 未登录
  if (null === getToken()) {
    showLoginRef.value = true;
  }
  getDictList();
});
onHide(() => {
  // #ifdef WEB
  window.removeEventListener()
  // #endif
});
onShow(() => {
  treasureType.value = userMySelf.treasure
  // #ifdef  MP-WEIXIN
  fetchData();
  // #endif
  // #ifdef WEB
  fetchDataH5()
  // #endif
  if (userMySelf?.shopVip !== "undefined") {
    if (userMySelf?.shopVip == 0) {
      // toast('现在还不是会员哦');
      showRef.value = true;
    } else {
      showRef.value = false;
    }
  }
});
const fetchDataH5 = async () => {
  //console.log('h5')
  uni.getLocation({
    type: "wgs84",
    success: (res) => {
      latitude.value = res.latitude;
      longitude.value = res.longitude;
      //console.log(res, "res");
      mapShow.value = false;
    },
  });
};
// 地图选点
// #ifdef  MP-WEIXIN
const choosePosition = async () => {
  const location = JSON.stringify({
    latitude: latitude.value,
    longitude: longitude.value,
  });
  uni.navigateTo({
    url: `plugin://chooseLocation/index?key=${key.value}&referer=${referer.value}&location=${location}&category=${category.value}`,
  });
};
// #endif
const getChooseLocation = async () => {
  // #ifdef  MP-WEIXIN
  await choosePosition();
  // #endif
  // #ifdef WEB
  //console.log(latitude.value,longitude.value)
  mapShow.value = true
  // uni.chooseLocation({
  // 	success: (res) => {
  // 		console.log(res,res.address)
  // 	}
  // });
  // uni.getLocation({
  //     isHighAccuracy: true,
  //     success(res) {
  //       console.log(res)
  //       longitude.value = res.longitude
  //       latitude.value = res.latitude
  //       mapShow.value = !mapShow.value
  //     },
  //     fail(err) {
  //       uni.showToast({
  //         title: '频繁定位失败，请重试',
  //         icon: 'none'
  //       })
  //     }
  //   })
  // #endif
};
// #ifdef  MP-WEIXIN
const fetchData = async () => {
  chooseLocationFn();
  const res = await chooseLocation.getLocation();
  if (res) {
    fbAddress.value = res.address;
    //console.log(fbAddress.value, "fbAddress.value");
    data.formData.address = res.address;
    data.formData.lon = res.longitude;
    data.formData.lat = res.latitude;
    longitude.value = res.longitude;
    latitude.value = res.latitude;
    cache.set("address", res.address);
  }
};
const chooseLocationFn = async () => {
  uni.getLocation({
    type: "wgs84",
    success: (res) => {
      latitude.value = res.latitude;
      longitude.value = res.longitude;
    },
  });
};
// #endif
const getLimit = () => {
  if (imgList?.value?.[0]?.type === "video") {
    return 1;
  }

  return 9;
};
onMounted(() => { });
</script>

<template>
  <navbar :fixed="navbarFixed" title="奇石家" />
  <view class="container-publish">
    <view class="empty"></view>
    <view class="box">
      <input class="form-input-item-search" v-model="data.formData.title" border="none" placeholder="请输入奇石描述标题~"
        :maxlength="50" />
      <view class="line"></view>
      <textarea v-model="data.formData.describes" class="form-textarea-item" placeholder="请详细描述奇石信息~"
        :maxlength="500" />
      <view class="uoloda-warapper">
        <view class="upload-title">奇石图片</view>
        <view class="item-upload">
          <view class="item-upload-img">
            <view v-for="(item, index) in imgList" :key="index" class="image">
              <image v-if="item.type == 'image'" :src="item.url" mode="scaleToFill" />
              <video v-else :src="item.url" :poster="item.thumb" />
              <view class="upload-del" @click="handleClose(index)"></view>
            </view>

            <!-- @click="handleChooseUpload" v-if="imgList.length < getLimit()" -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="item-upload-img-add" @click="handleUploadMedia" v-if="imgList.length < 9"></view>
            <!-- #endif -->
            <!-- #ifdef WEB -->
            <view class="item-upload-img-add" @click="handleUploadImg" v-if="imgList.length < 9"></view>
            <!-- #endif -->
          </view>
        </view>
        <view class="upload-notice">最多可以添加1个视频9张图片</view>
      </view>
    </view>

    <view class="module-title">
      <view class="module-title-bg"></view>
      <view class="module-title-text">{{
        dictList.map((o) => o.deptName).join("、")
        }}</view>
    </view>

    <view class="box">
      <view class="form-card-title">
        <view v-for="(item, idx) in dictList" :key="item.typeId">
          <view class="form-card-radio">
            <view class="form-radio-title">{{ item.deptName }}</view>
            <uv-radio-group v-model="data.formData[item.field]" class="form-radio-btn">
              <uv-radio activeColor="#C33F29" :label="typesItem.deptName" :name="typesItem.typeId"
                v-for="typesItem in item.types" :key="typesItem.typeId"></uv-radio>
            </uv-radio-group>
          </view>
          <view class="line2" v-if="idx !== dictList.length"></view>
        </view>
      </view>
    </view>

    <view class="module-title">
      <view class="module-title-bg"></view>
      <view class="module-title-text">尺寸</view>
    </view>

    <view class="box">
      <view class="honey-wrapp">
        <view class="form-card form-item">
          <view class="form-item-label">长度(cm)</view>
          <view class="form-input">
            <input type="digit" border="none" class="form-input" placeholder="请输入长度" v-model="data.formData.leng"
              :maxlength="5" />
          </view>
        </view>
        <view class="line2"></view>
        <view class="form-card form-item">
          <view class="form-item-label">宽度(cm)</view>
          <view class="form-input">
            <input class="form-input" placeholder="请输入宽度" v-model="data.formData.wide" type="digit" border="none"
              :maxlength="5" />
          </view>
        </view>
        <view class="line2"></view>
        <view class="form-card form-item">
          <view class="form-item-label">高度(cm)</view>
          <view class="form-input">
            <input class="form-input" placeholder="请输入高度" v-model="data.formData.heg" type="digit" border="none"
              :maxlength="5" />
          </view>
        </view>
      </view>
    </view>

    <view class="module-title">
      <view class="module-title-bg"></view>
      <view class="module-title-text">宝贝信息</view>
    </view>

    <view class="box">
      <view class="honey-wrapp">
        <view class="form-card form-item">
          <view class="form-item-label">宝贝位置</view>
          <view class="form-input" @click="getChooseLocation">
            <input class="form-input" placeholder="请选择" disabled v-model="data.formData.address" />
            <view class="form-input-suff">
              <image src="@/static/images/arrow.png" />
            </view>
          </view>
        </view>
        <view class="line2"></view>
        <view class="form-card form-item" style="margin-bottom: 0">
          <view class="form-item-label">宝贝价格</view>
          <view class="form-input">
            <uv-input type="digit" class="form-input" placeholder="请输入宝贝价格" border="none"
              v-model="data.formData.currentPrice"></uv-input>
            <view class="form-input-suff">元</view>
          </view>
        </view>
        <view class="line2"></view>
        <view class="form-card form-item" style="margin-bottom: 0">
          <view class="form-item-label">宝贝产地</view>
          <view class="form-input">
            <uv-input type="text" class="form-input" placeholder="请输入宝贝产地" border="none"
              v-model="data.formData.producingArea"></uv-input>
          </view>
        </view>
        <!-- <view class="form-card form-item">
          <view class="form-item-label">宝贝原价</view>
          <view class="form-input">
            <uv-input
              type="digit"
              class="form-input"
              placeholder="请输入宝贝原价"
              border="none"
              v-model="data.formData.oldPrice"
            ></uv-input>
            <view class="form-input-suff">元</view>
          </view>
        </view> -->
        <view class="line2"></view>
        <view class="form-card form-item">
          <view class="form-item-label">发货方式</view>
          <uv-radio-group v-model="data.formData.delivery">
            <uv-radio label="包邮" :name="0" activeColor="#C33F29"></uv-radio>
            <uv-radio label="邮费商议" :name="1" activeColor="#C33F29"></uv-radio>
            <!-- <uv-radio label="自取" :name="2" activeColor="#C33F29"></uv-radio> -->
          </uv-radio-group>
        </view>
        <block v-if="treasureType == 1">
          <view class="line2"></view>
          <view class="form-card form-item">
            <view class="form-item-label">珍宝档案</view>
            <uv-radio-group v-model="data.formData.treasure">
              <uv-radio label="否" :name="0" activeColor="#C33F29"></uv-radio>
              <uv-radio label="是" :name="1" activeColor="#C33F29"></uv-radio>
              <!-- <uv-radio label="自取" :name="2" activeColor="#C33F29"></uv-radio> -->
            </uv-radio-group>
          </view>
        </block>

      </view>
    </view>

    <view class="btn-group justify-between">
      <button class="btn-cancel" @click="cancelClick">取消</button>
      <button class="btn-publish" @click="publishGoods">提交</button>
    </view>
  </view>
  <!-- #ifdef WEB -->
  <!-- <web-view v-if="mapShow" ref='map'
        :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&coordtype='+${longitude}+','+ ${latitude}+'&key=${key}&referer=${referer}`">
  </web-view> -->
  <div v-if="mapShow" id="position"
    style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 11111111">
    <iframe id="mapPage" width="100%" height="100%" frameborder="0"
      :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=${referer}`"></iframe>
  </div>
  <!-- #endif -->
  <uv-overlay zIndex="1999" :show="showLoginRef" zoom="true" round="10" @change="change" class="overlay">
    <view class="validate">
      <view class="flex justify-between">
        <view class="icon flex flex-center">
          <view class="icon2 flex flex-center">
            <image src="@/static/images/alarm-warning-line.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="icons-close" @click="showLoginRef = false">
          <image src="@/static/images/icons-close.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="title"> 登录提醒 </view>
      <view class="content">该功能需要您的用户信息方能正常使用，请先完成登录~
      </view>
      <view class="flex justify-around btn-group">
        <button class="btn-cancel" @click="showLoginRef = false">取消</button>
        <button class="btn-open" @click="router(`/pages/login/login`)">
          立即登录
        </button>
      </view>
      <view class="form-card form-item">
        <view class="form-item-label">
          <image src="@/static/images/delivery.png" mode="scaleToFill" class="form-item-icon" />
          <text>发货方式：</text>
        </view>
        <uv-radio-group v-model="data.formData.delivery">
          <uv-radio label="包邮" :name="0"></uv-radio>
          <uv-radio label="不包邮" :name="1"></uv-radio>
          <!-- <uv-radio label="自取" :name="2"></uv-radio> -->
        </uv-radio-group>
      </view>

      <view class="btn-group justify-between">
        <button class="btn-cancel" @click="cancelClick">取消</button>
        <button class="btn-publish" @click="publishGoods">提交</button>
      </view>
    </view>
  </uv-overlay>

  <uv-overlay zIndex="1999" :show="showLoginRef" zoom="true" round="10" @change="change" class="overlay">
    <view class="validate">
      <view class="flex justify-between">
        <view class="icon flex flex-center">
          <view class="icon2 flex flex-center">
            <image src="@/static/images/alarm-warning-line.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="icons-close" @click="showLoginRef = false">
          <image src="@/static/images/icons-close.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="title"> 登录提醒 </view>
      <view class="content">该功能需要您的用户信息方能正常使用，请先完成登录~
      </view>
      <view class="flex justify-around btn-group">
        <button class="btn-cancel" @click="showLoginRef = false">取消</button>
        <button class="btn-open" @click="router(`/pages/login/login`)">
          立即登录
        </button>
      </view>
    </view>
  </uv-overlay>
  <!-- 文件选择器 -->
  <uv-overlay :show="chooseUploadRef" @click="chooseUploadRef = false">
    <view class="choose flex flex-column flex-center">
      <view @click="handleUploadImage">选择图片</view>
      <view class="line">
        <uv-line></uv-line>
      </view>
      <view @click="handleUploadVideo">选择视频</view>
    </view>
  </uv-overlay>
  <!-- 文件选择器 -->
  <uv-overlay :show="chooseUploadRef" @click="chooseUploadRef = false">
    <view class="choose flex flex-column flex-center">
      <view @click="handleUploadImage" class="select-item">选择照片</view>
      <view class="line">
        <uv-line></uv-line>
      </view>
      <view @click="handleUploadVideo" class="select-item">选择视频</view>
    </view>
  </uv-overlay>
</template>

<style lang="scss" scoped>
::v-deep .uv-radio {
  margin: 10rpx;
}

::v-deeep .uv-overlay {
  width: auto !important;
}

::v-deep .uv-radio-group {
  // padding: 0 10rpx;
}

::v-deep .uv-navbar__content__left {
  display: none !important;
}

.choose {
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: 0;

  width: 100%;
  background-color: #ffffff;

  .line {
    width: 100%;
  }
}

.container-publish {
  position: relative;
  background: #ececec url("@/static/images/publish-bg.png") no-repeat;
  background-size: 750rpx 375rpx;

  .empty {
    height: 30rpx;
    background: transparent;
  }

  .box {
    width: 710rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-left: 20rpx;

    .honey-wrapp {
      padding: 0 30rpx;
    }

    .line2 {
      width: 650rpx;
      height: 1rpx;
      border: 1rpx solid #eaebed;
    }
  }

  .module-title {
    padding: 40rpx 20rpx;
    display: flex;

    .module-title-bg {
      width: 24rpx;
      height: 60rpx;
      background: #ececec url("@/static/images/t-line.png") no-repeat;
      background-size: 24rpx 60rpx;
    }

    .module-title-text {
      flex: 1;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #000000;
      line-height: 60rpx;
      font-style: normal;
      padding-left: 18rpx;
    }
  }

  .form-input-item-search {
    height: 122rpx;
    padding: 0 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 34rpx;
    color: #999999;
  }

  .form-input-item {
    flex: 1;

    input {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #000000;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .line {
    width: 650rpx;
    margin-left: 30rpx;
    width: 650rpx;
    height: 1rpx;
    border: 1rpx solid #eaebed;
  }

  .form-textarea-item {
    position: static;
    margin-top: 26rpx;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
    width: 650rpx;
    height: 256rpx;
    background: #f4f4f4;
    border-radius: 16rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(23, 26, 29, 0.4);
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    margin-left: 30rpx;
  }

  .uoloda-warapper {
    padding: 0 30rpx;

    .upload-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      line-height: 45rpx;
      text-align: left;
      font-style: normal;
      padding-top: 52rpx;
      padding-bottom: 27rpx;
    }

    .item-upload {
      .item-upload-img {
        // width: 170rpx;
        // height: 190rpx;
        display: flex;
        flex-wrap: wrap;

        .image {
          width: 170rpx;
          height: 190rpx;
          margin-left: 15rpx;
          position: relative;
          margin-top: 15rpx;

          image,
          video {
            width: 170rpx;
            height: 190rpx;
          }
        }

        .upload-del {
          position: absolute;
          right: 0;
          top: 0;
          width: 36rpx;
          height: 36rpx;
          background: url("@/static/images/upload-del.png") no-repeat;
          background-size: 36rpx 36rpx;
        }
      }

      .item-upload-img-add {
        width: 170rpx;
        height: 190rpx;
        background: url("@/static/images/upload-add.png") no-repeat;
        background-size: 170rpx 190rpx;
        margin-left: 15rpx;
        margin-top: 15rpx;
      }
    }

    .upload-notice {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.3);
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      padding: 23rpx 0 30rpx 0;
    }
  }

  .form-card-title {
    padding: 0 30rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 45rpx;
    text-align: left;
    font-style: normal;

    .form-card-radio {
      display: flex;
      padding: 32rpx 0;

      .form-radio-title {
        width: 80rpx;
      }

      .form-radio-btn {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }

  .form-upload-card {
    height: 100%;
    margin-bottom: 30rpx;

    .form-upload-item {
      padding: 20rpx;
    }

    .form-upload {
      padding: 20rpx;
      display: flex;
      height: 100%;

      .form-upload-img {
        flex-wrap: wrap;
        height: 100%;
        display: flex;
      }

      .image {
        position: relative;
        width: 144rpx;
        height: 144rpx;
        margin-right: 30rpx;
        margin-bottom: 30rpx;

        video {
          width: 100%;
          height: 100%;
        }

        image {
          border-radius: 6px;
        }

        .close {
          position: absolute;
          right: -10rpx;
          top: -10rpx;
          background-color: #f3604e;
          width: 18px;
          height: 18px;
          border-radius: 50%;
        }

        .icon-plus {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .upload-btn-bg {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #efefef;
      }

      .upload-btn-text {
        color: #cecece;
        font-size: 24rpx;
      }
    }
  }
}

.form-radio-title {
  // width: 150rpx;
  margin-top: 10rpx;
  font-size: 28rpx;
}

.form-radio-group {
  padding-right: 30rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.form-radio-item {
  display: flex;
  align-items: center;

  .form-radio-label {
    font-size: 25rpx;
  }
}

.form-input {
  border: none;
  font-size: 26rpx;
  position: relative;
  width: 100%;
  flex: 1;

  .form-input-suff {
    position: absolute;
    right: 0;
    transform: translate(-50%, -50%);
    top: 50%;

    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    text-align: center;
    font-style: normal;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}

.btn-group {
  margin-top: 80rpx;
  padding: 20rpx 40rpx;
  display: flex;
  height: 140rpx;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.9) 0%,
      #ffffff 16%,
      #ffffff 84%,
      rgba(255, 255, 255, 0.9) 100%);

  .btn-cancel {
    background-color: transparent;
    border: 1px solid #999999;
    box-shadow: none;
    border-radius: 50rpx;
    width: 246rpx;
    height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #676767;
    line-height: 50rpx;
    text-align: left;
    font-style: normal;
  }

  .btn-publish {
    // background-color: transparent;
    background: linear-gradient(0deg,
        rgba(191, 1, 3, 1) 0%,
        rgba(255, 84, 2, 1) 99.2%);
    box-shadow: none;
    border: 1px solid #999999;
    border-radius: 50rpx;
    border: none;
    width: 398rpx;
    color: #ffffff;
    height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 50rpx;
    text-align: left;
    font-style: normal;
  }
}

.form-item {
  display: flex;
  align-items: center;
  padding: 39rpx 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.form-item-label {
  width: 170rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.form-item-icon {
  margin-top: 7rpx;
  width: 32rpx;
  height: 32rpx;
  margin: 0 20rpx;
}

.validate {
  padding: 40rpx;
  position: absolute;
  border-radius: 20rpx;
  width: 626rpx;
  height: 500rpx;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffffff;

  .icons-close {
    width: 50rpx;
    height: 50rpx;
  }

  .btn-group {
    margin-top: 40rpx;

    .btn-cancel {
      border-radius: 8px;
      border: 1px solid rgba(154, 154, 154);
      font-size: 14px;
      width: 250rpx;
      color: #4f4f4f;
      height: 80rpx;
    }

    .btn-open {
      border-radius: 8px;
      background: linear-gradient(0deg, #bf0103, #ff5402);

      color: #ffffff;
      border: 0px solid #bbbbbb;
      font-size: 14px;
      width: 250rpx;
      height: 80rpx;
    }
  }

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }
}

.select-item {
  width: 100%;
  padding: 20rpx 0;
  text-align: center;
}
</style>
